<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画片</title>
    
    <style>
        body{
            margin: 0px;
            padding: 0px;
            background: #ccc;
        }
        .tou{
            background: #f1ba68;
            height: 200px;
            width: 200px;
            border-radius: 100px;
            margin: 100px auto;
            position: relative;
        }
        .meimao1{
            position: absolute;
            background-color: #000;
            width: 30px;
            height: 5px;
            top: 70px;
            left: 50px;
            border-radius: 10px;
        }
        .yanbai1{
            position: absolute;
            background-color: rgb(234, 234, 234);
            width: 30px;
            height: 18px;
            top: 80px;
            left: 50px;
            border-radius: 10px;
        }
        .yanjing1{
            background-color: rgb(21, 88, 37);
            left: 7px;
            top: 2px;
            border-radius: 10px;
            position: absolute;
            z-index: 999;
            width: 15px;
            height: 15px;
        }

        .meimao2{
            position: absolute;
            background-color: #000;
            width: 30px;
            height: 5px;
            top: 70px;
            left: 120px;
            border-radius: 10px;
        }
        .yanbai2{
            position: absolute;
            background-color: rgb(234, 234, 234);
            width: 30px;
            height: 18px;
            top: 80px;
            left: 120px;
            border-radius: 10px;
        }
        .yanjing2{
            background-color: rgb(21, 88, 37);
            left: 7px;
            top: 2px;
            border-radius: 10px;
            position: absolute;
            z-index: 999;
            width: 15px;
            height: 15px;
        }

        .tou:hover .yanbai1{
            height: 1px; 
            transition: height ease-in 0.1s;
        }
        .tou:hover .yanbai2{
            height: 1px; 
            transition: height ease-in 0.1s;
        }
        .tou:hover .yanjing1{
            height: 0px; 
            transition: height ease-in 0.1s;
        }
        .tou:hover .yanjing2{
            height: 0px; 
            transition: height ease-in 0.1s;
        }
        .toufa{background: #000;  width: 200px; position: absolute; height:150px; width: 150px; top:-50px; border-radius: 100px;}
        .toufa1{background: #000;  width: 200px; position: absolute; height:500px; width: 100px; top:-10px; left:-55px; border-radius: 150px;}
        .toufa2{background: #000;  width: 200px; position: absolute; height:150px; width: 150px; top:-60px; left:50px; border-radius: 100px;}
        .toufa3{background: #000;  width: 200px; position: absolute; height:150px; width: 150px; top:-50px; left:100px; border-radius: 100px;}
        .toufa4{background: #000;  width: 200px; position: absolute; height:500px; width: 100px; top:-10px; left:160px; border-radius: 150px;}
    </style>
</head>
<body>
   
    <div class="tou">
        <div class="toufa"></div>
        <div class="toufa1"></div>
        <div class="toufa2"></div>
        <div class="toufa3"></div>
        <div class="toufa4"></div>
        <div class="meimao1"></div>
        <div class="meimao2"></div>
        <div class="yanbai1"><div class="yanjing1"></div></div>
        <div class="yanbai2"><div class="yanjing2"></div></div>
        <div class="bizi"></div>
        <div class="zuiba"></div>
    </div>
</body>
</html>